import React, { useEffect, useState } from 'react';
import { Outlet, useNavigate } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux'
import { MenuFoldOutlined, MenuUnfoldOutlined, UserSwitchOutlined, HomeOutlined, PictureOutlined, UserOutlined, DeploymentUnitOutlined, LineChartOutlined, FormOutlined, TableOutlined, AimOutlined } from '@ant-design/icons';
import { Layout, Menu, theme, Dropdown } from 'antd';

import './Index.scss'
import MyBreadCrumb from '../../components/MyBreadCrumb'
function Index(props) {
    //解构layout
    const { Header, Content, Sider } = Layout;
    const [collapsed, setCollapsed] = useState(false);
    const { token: { colorBgContainer } } = theme.useToken();
    //获取store中存储的用户信息
    var userInfo = useSelector((state) => state.userInfo)
    var keyPath = useSelector((state) => state.keyPath)

    var dispatch = useDispatch()

    var navigate = useNavigate();

    function getItem(label, key, icon, children) {
        return {
            label,
            key,
            icon,
            children,
        };
    }
    const items = [
        getItem('首页', '/index/home', <HomeOutlined />),
        getItem('轮播图管理', 'banner', <PictureOutlined />, [getItem('轮播图列表', '/index/banner')]),
        getItem('账号管理', 'account', <UserOutlined />, [getItem('管理员列表', '/index/account')]),
        getItem('产品管理', 'pro', <DeploymentUnitOutlined />,
            [
                getItem('产品列表', '/index/pro'),
                getItem('秒杀列表', '/index/seckill'),
                getItem('推荐列表', '/index/recommend'),
                getItem('筛选列表', '/index/filter'),
            ]),
        getItem('数据可视化', 'statistic', <LineChartOutlined />, [getItem('echarts使用', '/index/statistic')]),
        getItem('编辑器', 'editor', <FormOutlined />, [getItem('富文本编辑器', '/index/edit')]),
        getItem('excel管理', 'excel', <TableOutlined />, [getItem('excel使用', '/index/excel')]),
        getItem('地图管理', 'mapmanage', <AimOutlined />, [getItem('百度地图', '/index/mapmanagement')]),
    ];
    var out = () => {
        dispatch({ type: 'REMOVE_USERINFO' });
        navigate('/login');
    }
    var chose = ({ item, key, keyPath }) => {
        dispatch({ type: 'SAVE_KEYPATH', payload: keyPath })
        navigate(key);
    }
    const userinfoitems = [
        {
            key: '1',
            label: (
                <div>设置</div>
            ),
        },
        {
            key: '2',
            label: (
                <div onClick={out}>退出</div>
            ),
        },
    ]
    //控制菜单栏的收缩和展开
    var handleCollapse = () => {
        setCollapsed(!collapsed)
    }
    return (
        <div className='index-box'>
            <Layout style={{ minHeight: '100vh', }}>
                <Sider collapsed={collapsed}>
                    <div className='index-box-sider-title'>
                        <span>{collapsed ? '' : '嗨购后台管理系统'}</span>
                    </div>
                    <Menu theme="dark" mode="inline" items={items} onClick={chose} defaultOpenKeys={keyPath} selectedKeys={keyPath}/>
                </Sider>
                <Layout className="site-layout">
                    <Header>
                        <div className="index-box-header-left" onClick={handleCollapse}>
                            {
                                collapsed ?
                                    <MenuUnfoldOutlined /> :
                                    <MenuFoldOutlined />
                            }
                        </div>
                        <div className="welcome">
                            欢迎：&nbsp; {userInfo.adminname}   &nbsp;
                            <Dropdown menu={{ items: userinfoitems }} placement="bottom" arrow>
                                <UserSwitchOutlined />
                            </Dropdown>
                        </div>
                    </Header>
                    <Content>
                        {/* <Breadcrumb>
                            <Breadcrumb.Item>首页</Breadcrumb.Item>
                            <Breadcrumb.Item>轮播图管理</Breadcrumb.Item>
                        </Breadcrumb> */}
                        <div className='index-box-content'>
                            {/* 面包屑导航 */}
                            <MyBreadCrumb />
                            {/* 占位组件 */}
                            <Outlet />
                        </div>
                    </Content>
                </Layout>
            </Layout>

        </div>
    );
}

export default Index;